<template>
  <div style="padding: 30px">
    <el-row>
      <el-col :span="4">
        <img src="../img/1.png" style="width: 100px;">
        <el-menu
            default-active="2"
            class="el-menu-vertical-demo"
            @open="handleOpen"
            @close="handleClose"
            :unique-opened="true"
        >
          <el-sub-menu index="1">
            <template #title>
              <el-icon>
                <Stopwatch/>
              </el-icon>
              <span style="font-size: 17px">仪表盘</span>
            </template>
            <el-menu-item-group>
              <el-menu-item index="1-1" @click="chuan('仪表盘')">仪表盘</el-menu-item>
            </el-menu-item-group>
          </el-sub-menu>
          <el-sub-menu index="2">
            <template #title>
              <el-icon>
                <Menu/>
              </el-icon>
              <span style="font-size: 17px">常用设置</span>
            </template>
            <el-menu-item-group>
              <el-menu-item index="2-1" @click="chuan('教师管理')">教师管理</el-menu-item>
              <el-menu-item index="2-2" @click="chuan('学生管理')">学生管理</el-menu-item>
              <el-menu-item index="2-3" @click="chuan('公告管理')">公告管理</el-menu-item>
              <el-menu-item index="2-4" @click="chuan('系统配置')">系统配置</el-menu-item>
              <el-menu-item index="2-5" @click="chuan('判断服务器')">判断服务器</el-menu-item>
            </el-menu-item-group>
          </el-sub-menu>
          <el-sub-menu index="3">
            <template #title>
              <el-icon>
                <Aim/>
              </el-icon>
              <span style="font-size: 17px">问题</span>
            </template>
            <el-menu-item-group>
              <el-menu-item index="3-1" @click="chuan('问题列表')">问题列表</el-menu-item>
              <el-menu-item index="3-2" @click="chuan('增加题目')">增加题目</el-menu-item>
              <el-menu-item index="3-3" @click="chuan('导入导出问题')">导入导出问题</el-menu-item>
            </el-menu-item-group>
          </el-sub-menu>
          <el-sub-menu index="4">
            <template #title>
              <el-icon>
                <Trophy/>
              </el-icon>
              <span style="font-size: 17px">比赛&练习</span>
            </template>
            <el-menu-item-group>
              <el-menu-item index="4-1" @click="chuan('比赛列表')">比赛列表</el-menu-item>
              <el-menu-item index="4-2" @click="chuan('创建比赛')">创建比赛</el-menu-item>
            </el-menu-item-group>
          </el-sub-menu>
          <el-sub-menu index="5">
            <template #title>
              <el-icon>
                <Collection/>
              </el-icon>
              <span>课程</span>
            </template>
            <el-menu-item-group>
              <el-menu-item index="5-1" @click="chuan('课程列表')">课程列表</el-menu-item>
              <el-menu-item index="5-2" @click="chuan('创建课程')">创建课程</el-menu-item>
            </el-menu-item-group>
          </el-sub-menu>
        </el-menu>
      </el-col>
      <el-col :span="20">
        <div style="background-color: #f6f5f5; height: 60px;">
          <div style="position: absolute;right:130px; top: 22px">
            <el-icon>
              <search/>
            </el-icon>
            <el-icon>
              <share/>
            </el-icon>
            <el-select class="sel" v-model="value" placeholder="请选择" style="width: 120px">
              <el-option
                  v-for="item in data"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
              >
              </el-option>
            </el-select>
          </div>
        </div>
        <div class="background">
          <div class="among">
            <div class="title">
              <span class="size">{{ title }}</span>
              <el-divider style="margin-top: 50px"></el-divider>
            </div>
            <div v-show="title !== '课程列表'">
              <span>{{ title }} ———— 主题内容</span>
            </div>
            <div align="center" v-show="title === '课程列表'">
              <el-table :data="tableData" style="width: 80%">
                <el-table-column type="index" label="序号" width="80" />
                <el-table-column prop="date" label="课程名称" width="200"/>
                <el-table-column prop="name" label="创建时间" width="200"/>
                <el-table-column label="可见状态">
                  <template #default="scope">
                    <el-switch
                        v-model="scope.row.status"
                        :active-value="1"
                        :inactive-value="2"
                        @change="changeSwitch(scope.row)"/>
                  </template>
                </el-table-column>
                <el-table-column label="操作">
                  <template #default="scope">
                    <el-button size="small" @click="handleEdit(scope.$index, scope.row)">
                      <el-icon><edit-pen /></el-icon>
                    </el-button>
                    <el-button size="small" @click="handleEdit(scope.$index, scope.row)">
                      <el-icon><suitcase /></el-icon>
                    </el-button>
                    <el-button size="small" @click="handleEdit(scope.$index, scope.row)">
                      <el-icon><monitor /></el-icon>
                    </el-button>
                    <el-button size="small" @click="handleEdit(scope.$index, scope.row)">
                      <el-icon><office-building /></el-icon>
                    </el-button>
                  </template>
                </el-table-column>
              </el-table>
            </div>
          </div>
        </div>
        <div style="background-color: #d2cfcf; height: 18px">
          <span>build 213665213215</span>
        </div>
      </el-col>
    </el-row>
  </div>
</template>

<script>
export default {
  name: 'HelloWorld',
  data() {
    return {
      value1:true,
      title: '仪表盘',
      value: 'username',
      data: [{
        value: 'username',
        lable: 'username'
      }, {
        value: 'logout',
        lable: 'logout'
      }],
      tableData: [
        {
          date: 'java程序设计',
          name: '2022-12-12',
          status: 1,
        },
        {
          date: 'MySql数据库技术',
          name: '2022-12-12',
          status: 1,
        },
        {
          date: 'Web开发基础',
          name: '2022-12-12',
          status: 2,
        },
        {
          date: 'Web开发实战',
          name: '2022-12-12',
          status: 1,
        },
      ]
    }
  },
  methods: {
    handleOpen(key, keyPath) {
      console.log(key, keyPath);
    },
    handleClose(key, keyPath) {
      console.log(key, keyPath);
    },
    chuan(row) {
      this.title = row
    },
    changeSwitch(row){
      console.log(row)
    },
    handleEdit(row){
      console.log(row)
    }
  }
}
</script>

<style scoped>
.sel {
  position: absolute;
  clip: rect(2px 90px 30px 2px);
  width: 120px;
  height: 28px;
  top: -9px;
  line-height: 28px;
  font-size: 15px;
  font-weight: bold;
}

.background {
  min-height: 500px;
  padding: 60px;
  background-color: #d2cfcf;
}

.among {
  width: 100%;
  min-height: 300px;
  background-color: #ffffff;
}

.title {
  width: 100%;
  float: left;
  margin: 18px 0 18px 15px;
  font-size: 20px;
}

.size {
  margin: 10px 0 12px 12px;
  float: left;
}

</style>
